'use client'
import { LJIcon } from "@/public/icon";
import { Image, ScrollShadow } from "@nextui-org/react";
import { useState } from "react";

export default function ImageOperationsArea({
    images = [],
    defaultIndex = 0
}){
    const [imageIndex, setImageIndex] = useState(defaultIndex)
    const [viewer, setViewer] = useState(images[imageIndex])
    function handleLeftArrow(){
        if(imageIndex === 0){
            return ;
        }
        setImageIndex(imageIndex - 1)
        setViewer(images[imageIndex])
    }
    function handleRightArrow(){
        if(imageIndex === images.length - 1){
            return ;
        }
        setImageIndex(imageIndex + 1)
        setViewer(images[imageIndex])
    }
    function changeImage(index){
        setImageIndex(index)
        setViewer(images[index])
    }
    return (
        <div className="image-operations-container relative select-none background-100 dark:bg-default">
            <div className="image-container pt-[13px] pb-[25px]">
                <div className="image-switch-content flex items-center justify-center">
                    <div className="LeftIcon image-switch-circle mr-[73px]" onClick={handleLeftArrow}>
                        <LJIcon.ArrowLeft></LJIcon.ArrowLeft>
                    </div>
                    <div className="image-content">
                        <Image src={viewer} alt="image-viewer" width={377} height={526}></Image>
                    </div>
                    <div className="RightIcon image-switch-circle ml-[73px]" onClick={handleRightArrow}>
                        <LJIcon.ArrowRight></LJIcon.ArrowRight>
                    </div>
                </div>
                <div className="flex justify-center">
                    <ScrollShadow orientation="horizontal" className="max-w-[485px] max-h-[120px] mt-[43px]">
                        <div className="image-list flex">
                            {
                                images.map((image, index)=>{
                                    return <div className={"image-item mr-[22px] border-content border-[2px] border-transparent px-[2px] py-[2px] cursor-pointer"+(imageIndex == index?" check":"")} key={index} onClick={()=>changeImage(index)}>
                                        <Image src={image} alt={image} width={75} height={98}></Image>
                                    </div>
                                })
                            }
                        </div>
                    </ScrollShadow>
                </div>
            </div>
            <div className="image-tools-box absolute right-[49px] top-[25px]  bg-[#CCCCCC] py-[35px] px-[20px] flex flex-col items-center h-[526px]">
                <div className="image-tools flex justify-center items-center flex-col">
                    <div className="image-tools-item justify-center flex items-center w-[30px] h-[30px] mb-[7.5px]">
                        <LJIcon.Heart color={images[imageIndex].isLike?"#DD2A2A":"#FFFFFF"}></LJIcon.Heart>
                    </div>
                    <div className="image-tools-item justify-center flex items-center w-[30px] h-[30px] mb-[7.5px]">
                        <LJIcon.Collect color={images[imageIndex].isCollect?"#ffcd29":"#FFFFFF"}></LJIcon.Collect>
                    </div>
                    <div className="image-tools-item justify-center flex items-center w-[30px] h-[30px] mb-[7.5px]">
                        <LJIcon.Download></LJIcon.Download>
                    </div>
                </div>
            </div>
        </div>
    )
}